<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin:0;
    }
    ul li{
        list-style: none;
    }
    a{
        text-decoration: none;
        color:inherit;
    }
    img{

    }
    .list{
        width:1200px;
        margin:50px auto 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }
    .list li {
        width:220px;
        text-align: center;
    }
    .list li img{
        width:100%;
    }
    .info{
        font-size: 18px;
        line-height: 24px;
        /* 多行文本溢出隐藏 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
    }
    </style>
</head>
<body>
    <div>
        <h4> ajax 模拟动态的商品数据渲染 .</h4>
        <ul class="list">
            <!-- <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                </a>
                <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                <p class="price"   >
                    ￥<span>5988.00</span>
                </p>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                </a>
                <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                <p class="price"   >
                    ￥<span>5988.00</span>
                </p>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                </a>
                <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                <p class="price"   >
                    ￥<span>5988.00</span>
                </p>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg" alt="">
                </a>
                <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
                <p class="price"   >
                    ￥<span>5988.00</span>
                </p>
            </li> -->
        </ul>
    </div>
    <script>
    // const goods =  [
    //     {
    //         "goodsId": "A001",
    //         "goodsName": "华为 HUAWEI P40 Pro",
    //         "goodsMsg": "华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G",
    //         "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg",
    //         "goodsPrice": 5988
    //     },
    //     {
    //         "goodsId": "A002",
    //         "goodsName": "Apple iPhone 11",
    //         "goodsMsg": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G",
    //         "goodsImg": "https://img10.360buyimg.com/n7/jfs/t1/41566/13/14792/149059/5d7809a7E99b4ed1b/56ea66c5f8a6f724.jpg",
    //         "goodsPrice": 5999
    //     },
    //     {
    //         "goodsId": "A003",
    //         "goodsName": "一加8Pro OnePlus",
    //         "goodsMsg": "一加8Pro OnePlus 1+8Pro 5G手机2K+120Hz 青空色",
    //         "goodsImg": "https://img13.360buyimg.com/n7/jfs/t1/131844/26/2030/179283/5ee212b8E6037a065/8ebdf06de22e64e0.jpg",
    //         "goodsPrice": 5399
    //     },
    //     {
    //         "goodsId": "A003",
    //         "goodsName": "小米10pro",
    //         "goodsMsg": "小米10pro 双模5G游戏手机【至高12期分期0首付】 珍珠白 12G+256G",
    //         "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/130507/6/2419/623986/5eea0995E7333f0e8/7ebbebf5a6312e30.png",
    //         "goodsPrice": 4928
    //     }
    // ];

    var ul =document.getElementsByClassName('list')[0]
    console.log(ul)
    // var html = "";
    // goods.forEach((item,index)=>{
    //     console.log(item)
    //     var {goodsId,goodsName,goodsMsg,goodsImg,goodsPrice} = item;
    //     html+= `
    //         <li>
    //             <a href="">
    //                 <img src="${goodsImg}" alt="">
    //             </a>
    //             <p class="info"> ${goodsMsg} </p>
    //             <p class="price"   >
    //                 ￥<span>${goodsPrice.toFixed(2)}</span>
    //             </p>
    //         </li>
    //     `
    // })
    // ul.innerHTML = html ;

    // 通过 ajax 请求数据  readyState 
    var xhr = new XMLHttpRequest()  // 0 
    xhr.open("get","../data/goods.json",true)  // 1 
    xhr.send()    //   1
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState)
        if(xhr.readyState == 4 && xhr.status ==200){
            // ajax 请求  后端会返回响应的数据 (text html json)
            console.log(xhr.responseText)

            var result = JSON.parse(xhr.responseText);
            console.log(result)
            // result.push(result)
            // result.push(result[0])
            // result.push(result[0])
            // result.push(result[0])
            // result.push(result[0])
            
            // 请求成功后动态生产json 对应的视图 
            var html = "";
            result.forEach((item,index)=>{
                console.log(item)
                var {goodsId,goodsName,goodsMsg,goodsImg,goodsPrice} = item;
                html+= `
                    <li>
                        <a href="">
                            <img src="${goodsImg}" alt="">
                        </a>
                        <p class="info"> ${goodsMsg} </p>
                        <p class="price"   >
                            ￥<span>${goodsPrice.toFixed(2)}</span>
                        </p>
                    </li>
                `
            })
            ul.innerHTML = html ;
        }
    }


    // php ---> mysql 数据库 
    </script>
</body>
</html>